<template>
  <div>
    <list @loadmore="fetch" loadmoreoffset="1" ref="list" :showRefresh="true" @refresh="onrefresh">
      <cell>
        <div style="justify-content:center">
            <slider class="slider size" auto-play="true">
              <div v-for="src in posters">
                <image class="size" resize="cover" :src="src"></image>
              </div>
              <indicator class="indicator"></indicator>
            </slider>
        </div>
      </cell>
      <cell>
        <div v-for="(v, i) in list" class="row">
          <div v-for="(text, k) in v" class="item">
            <image style="width:120px;height:120px" src="https://vuejs.org/images/logo.png"></image>
            <text>{{text}}</text>
          </div>
        </div>
      </cell>
      <cell v-for="(num, i) in lists" :key="i">
        <div class="panel">
          <image style="width:120px;height:120px" src="https://vuejs.org/images/logo.png"></image>
          <text class="text">{{num}}</text>
        </div>
      </cell>
    </list>
  </div>
</template>
<script>
  var modal = weex.requireModule("bmModal");
  var globalEvent = weex.requireModule('globalEvent');
  const LOADMORE_COUNT = 4;
  module.exports = {
    data: function () {
      return {
        list:[
          ['A', 'B', 'C'],
          ['D', 'E', 'F']
        ],
        posters:[
          'https://gw.alicdn.com/tfs/TB1TKvQk79WBuNjSspeXXaz5VXa-900-1312.jpg',
          'https://gw.alicdn.com/tfs/TB1nDsrkYSYBuNjSspfXXcZCpXa-1080-1575.jpg',
          'https://gw.alicdn.com/tfs/TB1MqHJkVuWBuNjSszbXXcS7FXa-1080-1574.jpg',
          'https://gw.alicdn.com/tfs/TB1u1gjkY1YBuNjSszhXXcUsFXa-1080-1518.jpg'
        ],
        lists: [1, 2, 3, 4, 5]
      }
    },
    methods: {
      fetch (event) {
        modal.toast({ message: 'loadmore', duration: 1 })

        setTimeout(() => {
          const length = this.lists.length
          for (let i = length; i < length + LOADMORE_COUNT; ++i) {
            this.lists.push(i + 1)
          }
        }, 800)
      },
      onrefresh(){
        modal.toast({ message: 'refresh', duration: 1 });
        this.$refs["list"].refreshEnd();
      }
    }
  }
</script>
<style scoped>
  .item{
    flex:1;
    justify-content: center;
    align-items:center;
    border-width:1;
  }
  .row{
    flex-direction: row;
    height:160px;
  }
  .size {
    width: 750px;
    height: 200px;
  }
  .slider {
    position: relative;
  }
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.3);

    itemColor: #DDDDDD;
    itemSelectedColor: rgb(0, 180, 255);
  }

  .panel {
    width: 600px;
    height: 250px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
    flex-direction: row;
  }
  .text {
    font-size: 100px;
    text-align: center;
    color: #41B883;
  }
</style>
